<template>
    <div>
        <!-- 表格区域-->
        <el-scrollbar height="500px">
        <el-table :data="orderList" border style="width: 100%" stripe >
            <el-table-column prop="id" label="订单号" width="180" />
            <el-table-column prop="items" label="商品名称" width="180" />
            <el-table-column prop="amount" label="商品价格" width="180" />
            <el-table-column prop="number" label="商品数量" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="findtOrderUser(scope.row.id)">查询订单的用户信息</el-button>
                </template>
            </el-table-column>
        </el-table>
       </el-scrollbar>

        <!-- 订单用户信息 -->
        <el-dialog v-model="orderDialogVisible" title="订单用户信息" width="30%" center>
              <p>用户账号: {{orderUser.acount}} </p>
              <p>收货人: {{orderUser.username}}</p>
              <p>联系电话: {{orderUser.phone}}</p>
              <p>收货地址: {{orderUser.address}}</p>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="orderDialogVisible = false">关闭</el-button>
            </span>
            </template>
        </el-dialog>              
    </div>
</template>

<script>
    export default{
        name:'Order',
        data(){
            return{
             orderList:'', 
             orderUser:'',
             orderDialogVisible:false,

            }
            
        },
        mounted(){
            this.getOrderList()
        },
        methods:{
            async getOrderList(){
                const result=await this.$http.get('/order/findAll')
                console.log(result);
                this.orderList=result
            },    
            async findtOrderUser(id){
                this.orderDialogVisible = true
                const result=await this.$http.get('/order/findid',{params:{id}})
                console.log(result[0].user.id);
                this.orderUser=result[0].user
                // console.log(this.orderUser.user);
            },
        }

    }
</script>